<template>
    <qly-base-page ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="0">
        <template #navbar>
            <qly-nav-bar :title="$t('common.placeOrder')">
                <template #right>
                    <uni-icons type="search" size="28" @click="openSearch"/>
                </template>
            </qly-nav-bar>
        </template>
        <template #header>
            <view class="tr-search-box">
                <up-search :placeholder="searchPlaceholder" v-model="params.keyword"></up-search>
            </view>
        </template>
        
        <tr-search ref="searchRef" v-model="params" :search-params="searchParams" @search="search"/>
        
        <view>
            <tr-card v-for="(item,index) in 10" :key="index" margin="12rpx 18rpx" borderRadius="12rpx">
                <view class="card-row row-between">
                    <view>{{ $t('common.orderNumber') }}：123456789</view>
                </view>
                <view class="card-row row-between">
                    <view>{{ $t('common.travel') }}{{ $t('common.date') }}：2025-05-05</view>
                    <view>
                        <up-tag text="取消订单" size="mini"></up-tag>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view>{{ $t('common.line') }}：北京市海淀区南大街景天</view>
                </view>
                <view class="card-row row-between">
                    <view>{{ $t('common.package') }}：北京市海淀区南大街景天</view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{ $t('common.reservationPerson') }}：</view>
                        <view class="value">张三</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{ $t('common.number') }}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{ $t('common.phone') }}：</view>
                        <view class="value">17897897897</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{ $t('common.meetingPoint') }}：</view>
                        <view class="value">浙江省杭州市萧山区心意广场</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{ $t('common.email') }}：</view>
                        <view class="value">17897897897</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{ $t('common.type') }}：</view>
                        <view class="value">英文</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{ $t('common.amount') }}：</view>
                        <view class="value">￥123</view>
                    </view>
                    <view class="card-row">
                        <view class="label">WhatsApp：</view>
                        <view class="value">1789789789</view>
                    </view>
                </view>
                <view class="red-text">{{ $t('common.remark') }}：拍照的具体金额不是很对，请重新核对后再申请</view>
                
            </tr-card>
        </view>
    </qly-base-page>
    
    <qly-draggable >
        <view class="update-box" @tap="placeOrder">
            {{ $t('common.placeOrder') }}
        </view>
    </qly-draggable>
</template>
<script setup>

const searchPlaceholder=computed(()=>{
    return $t('common.pleaseEnter')+' '+$t('common.orderNumber')
})

const searchRef = ref()
const params = ref({
    status: '',
    myPublishFlag: true
})
const searchParams = computed(()=>{
    return [
        {
            prop: 'orderNo',
            label: $t('common.orderNumber'),
            type: 'input',
        },
        {
            prop: 'daterange',
            label: $t('common.travel')+$t('common.date'),
            type: 'daterange',
        },
        {
            prop: 'name',
            label: $t('common.name'),
            type: 'input',
        },
        {
            prop: 'phone',
            label: $t('common.phone'),
            type: 'input',
        },
        {
            prop: 'phone',
            label: $t('common.reviewStatus'),
            type: 'select',
            data: [
                {
                    label: '待审核',
                    value: 1
                },
                {
                    label: '审核通过',
                    value: 2
                },
                {
                    label: '审核未通过',
                    value: 3
                },
            ]
        },
    ]
})

const openSearch=()=>{
    searchRef.value.open()
}

const search=()=>{
    console.log('search',params.value)
}

// 去下单
const placeOrder=()=>{
    qly.page.open('/pages/my/placeOrder/save')
}
</script>
<style scoped lang="scss">
.header-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 18rpx;
}
.btns-box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24rpx;
}
.red-text{
    margin-top: 12rpx;
}
.update-box{
    width: 120rpx;
    height: 120rpx;
    background-color: #5572f0;
    color: #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
